<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>flex-align-content</title>
    <style>
      div#main {
            width: 140px;
            height: 278px;
            border: 1px solid #000000;
        }
        div#main {
            display: flex;
            /* flex-flow: row wrap;
             */
             flex-direction: column;
             flex-wrap: wrap;
            align-content: space-around;
            /* align-content: stretch; */
        }
        div#main div {
            width: 70px;
            height: 70px;
        }
    </style>
</head>

<body>
        <div id="main">
            <div style="background-color:coral;"></div>
            <div style="background-color:lightblue;"></div>
            <div style="background-color:khaki;"></div>
            <div style="background-color:pink;"></div>
            <div style="background-color:lightgrey;"></div>
            <div style="background-color:lightgreen;"></div>
        </div>
        <div>
           align-content:用于子项目对齐主轴和副轴，生效的前提是设置主轴的方向，允许换行即设置flex-flow方向或者设置flex-direction和flex-wrap另外盒子款高需要设置否则不生效。
        </div>
</body>

</html>